<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>  
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8"/>
<title>注册页</title>
</head>
<body>
	<div>
		<div id="mesg"></div>
		用户名:<input id="userName" onchange="checkUserName()" >						<br>
		密码: <input id="password" type="password">		<br>
		确认密码:<input id="repassword" type="password">	<br>
		<button onclick="register()">注册</button> <a href="/day39/user/toLogin">返回登录页</a>
	</div>
	
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	//检测用户名是否可用
	function checkUserName(){
		var userName = $("#userName").val();
		if(userName==undefined || userName==""){
			$("#mesg").text("对不起,用户名不能为空");
			return;
		}
		
		$.ajax({
			url:"/day39/user/checkUserName",
			type:"post",
			data:{"userName":userName},
			dataType:"json",
			success:function(data){
				if(data.code==-1){
					$("#mesg").text(data.message);
				}else{
					$("#mesg").text(data.message);
				}
			}
		})
		
	}
	
	//注册
	function register(){
		var userName = $("#userName").val();
		if(userName==undefined||userName.trim()==""){
			$("#mesg").text("对不起,用户名不能为空");
			return;
		}
		
		var password = $("#password").val();
		if(password==undefined||password.trim()==""){
			$("#mesg").text("对不起,密码不能为空");
			return;
		}
		
		var repassword = $("#repassword").val();
		if(repassword!=password){
			$("#mesg").text("对不起,两次密码不一致");
			return;
		}
		
		$.ajax({
			url:"/day39/user/register",
			type:"post",
			data:{"userName":userName,"password":password,"repassword":repassword},
			dataType:"json", //预先设置服务器返回数据额格式  如果后台返回的数据真的是json, 
							//	ajax可以帮我们解析一下, 帮我们将json字符串转成js对象 将js对象赋值给data
			success:function(data){
				
				if(data.code==1){
					alert("恭喜您,注册成功");
					location.href="/day39/user/toLogin"
				}else{
					$("#mesg").text(data.message);
				}
			}
		})
		
		//为什么使用json
		//服务器返回的数据,有时候并不是单一的, 如果有多条数据返回,就需要我们手动组装格式
		//json就是目前世界上最流行的字符串数据格式  大部分语言都支持解析json , 可以快速的解析json
		//后台返回的数据必须是json格式的,   客户端接受数据时, 必须要设置预制格式为:json
	}
	
	
</script>
</html>